<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="velocity.min.js"></script>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <input placeholder="请输入要查找的内容" v-model="query">
    <transition-group name="item" tag="ul" 
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave" 
    v-bind:css="false">
      <li v-for="(item, index) in ComputedList" :key="item.msg"
       :data-index="index">
        {{ item.msg }}
      </li>
    </transition-group>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data () {
        return {
          query: '',    // v-model绑定的值
          items: [
            { msg: '张三' },
            { msg: '李四' },
            { msg: '张芳芳' },
            { msg: '王琳琳' },
            { msg: '冯圆' }
          ]
        }
      },
      computed: {                     // 计算属性
        ComputedList () {
          var vm = this.query		      // 获取到input输入框中的内容
          var nameList = this.items	  // 数组
          return nameList.filter(function (item) {
            return item.msg.toLowerCase().indexOf(vm.toLowerCase()) >= 0
          })
        }
      },
      methods: {
        beforeEnter (el) {
          el.style.opacity = 0
          el.style.height = 0
        },
        enter (el, done) {
          var delay = el.dataset.index * 150
          setTimeout(function () {
            Velocity(el, { opacity: 1, height: '1.6em' }, { complete: done })
          }, delay)
        },
        leave (el, done) {
          var delay = el.dataset.index * 150
          setTimeout(function () {
            Velocity(el, { opacity: 0, height: 0 }, { complete: done })
          }, delay)
        }
      }
    })
  </script>
</body>
</html>